<template>
	<view class="page-product">
		<uni-nav-bar :fixed="true" left-icon="left" @clickLeft="proxy.$util.back" @clickRight="goCart" :statusBar="true"
			:border="false" leftWidth="auto" rightWidth="auto" class="head-search">
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input confirm-type="search" placeholderStyle="font-size:14px" class="nav-bar-input" type="text"
					:placeholder="$t('common.keyword_input')"
					@confirm="e => {proxy.$util.navigateTo('/pages/category/list/list', {keyword: e.detail.value})}" />
			</view>
			<template v-slot:right>
				<view><uni-icons type="cart" size="28"></uni-icons></view>
			</template>
		</uni-nav-bar>

		<view v-if="product">
			<view class="product-images" v-if="images.length">
				<swiper class="swiper" circular :indicator-dots="true">
					<swiper-item v-for="(image, index) in images" :key="index" class="swiper-item"
						@click="productImgPreviewImage(index)">
						<view>
							<image class="image" :src="image.popup" mode="widthFix" />
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="product-info product-card">
				<view class="price-wrap" v-if="sku">
					<view class="price">{{ sku.price_format }}</view>
					<view class="price-old mt-1" v-if="sku.price != sku.origin_price">{{ sku.origin_price_format }}
					</view>
				</view>
				<view class="product-name" v-if="sku">{{ product.name }}</view>
				<view v-if="sku" class="sku-list-wrap">
					<text>SKU: {{ sku.sku }}</text>
					<text v-if="sku.model">{{ $t('product.product_model') }}: {{ sku.model }}</text>
					<text v-if="product.brand_name">{{ $t('product.product_brand') }}: {{ product.brand_name }}</text>
				</view>
			</view>

			<product-variable ref="variableModule" @change="variableChange" @quantityChange="quantityChange"
				:skus="product.skus" :variables="product.variables" />
			<product-attributes :attributes="product.attributes" v-if="product.attributes.length" />
			<product-description :description="product.description" v-if="product.description" />
			<product-bottom-btns @addToCart="addToCart" v-if="sku" :sku="sku" :id="product.id"
				:in_wishlist="product.in_wishlist" />
		</view>
	</view>
</template>

<script setup>
	import productBottomBtns from "./components/product-bottom-btns"
	import productDescription from "./components/product-description"
	import productAttributes from "./components/product-attributes"
	import productVariable from "./components/product-variable"
	const {
		proxy
	} = getCurrentInstance()
	import {
		t
	} from '@/locale/index'

	let quantity = 1
	const sku = ref(null)
	const product = ref(null)
	const images = ref([])
	const variableModule = ref(null);

	let id = null

	onLoad((e) => {
		id = e.id
		loadData()
	})

	const loadData = () => {
		proxy.$http.get(`products/${id}`).then((res) => {
			product.value = res.data
			images.value = res.data.images

			nextTick(() => {
				variableModule.value.formatVariables()
			})

			if (!res.data.variables.length) {
				sku.value = res.data.skus[0]
				images.value = res.data.images
			}
		})
	}

	const variableChange = (data, reload) => {
		images.value = JSON.parse(JSON.stringify(product.value.images))

		if (reload) {
			images.value.unshift(...data.images)
		}

		sku.value = data
	}

	const quantityChange = (e) => {
		quantity = e
	}

	// 接收 goodsNav 组件传递的 addToCart 事件
	const addToCart = (buyNow) => {
		if (!proxy.$util.isLogin()) {
			proxy.$util.msg(t('common.login_first'))
			uni.setStorageSync('login_after_url', 'pages/product/product')
			uni.navigateTo({
				url: '/pages/account/login/login'
			})
			return;
		}

		const data = {
			sku_id: sku.value.id,
			quantity: quantity,
			buy_now: buyNow
		}

		proxy.$http.post('carts', data).then((res) => {
			uni.setStorageSync('cart_number', res.data.selected_quantity)
			proxy.$util.msg({
				title: res.message,
				icon: 'success'
			}, () => {
				if (buyNow) {
					uni.navigateTo({
						url: '/pages/checkout/index'
					})
				}
			})
		})
	}

	const productImgPreviewImage = (index) => {
		uni.previewImage({
			urls: images.value.map((item) => item.popup),
			current: images.value[index].popup
		})
	}

	const goCart = () => {
		uni.switchTab({
			url: '/pages/cart/cart'
		})
	}
</script>

<style lang="scss" scoped>
	@import "./product.scss";
</style>